<div class="widget">
	<div class="widget-header bg-blue">
		<i class="widget-icon icon-notebook"></i> 
		<span class="widget-caption"> 班级管理 </span>
		<div class="widget-buttons">
			<a href="javascript:void(0);" onclick="handlerCancel(this);" title="关闭"
				 data-toggle="dispose" data-refresh-table="#table-classes"> <i class="fa fa-times"></i> </a> 
		</div>
	</div>
	<div class="widget-body">
		<!-- 学员信息 -->
		<div class="widget radius-bordered">
			<div class="widget-header bg-gold">
				<i class="widget-icon icon-notebook"></i> 
				<span class="widget-caption"> 本班学员 </span>
				<div class="widget-buttons buttons-bordered">
					<button type="button" class="btn btn-primary btn-sm" data-toggle="modal" data-target="#common-modal" data-url="content/eam/classes/dialog/history.html" 
								  data-onshow="onHistoryShow" data-onhidden="onHistoryHidden"
								  data-extention="托班，仅上课周期范围内的时间，可以签到和请假。">
						<i class="glyphicon glyphicon-calendar"></i> 签到管理
					</button>
					<span class="btn btn-default btn-sm">
						<i class="fa fa-clock-o gray"></i> <span data-now data-format="YYYY-MM-DD HH:mm:ss"></span>
					</span>
				</div>
			</div>
			<div class="widget-body editor-body-sm">
				<table data-ajax="handlerSearch" 
							 data-method="post" 
							 data-id-field="id" 
							 data-unique-id="id" 
							 data-pagination="true" 
							 data-click-to-select="true" 
							 data-side-pagination="server" 
							 data-mobile-responsive="true" 
							 data-form-search="#search-form-student" id="table-student" class="bootstrap-table">
					<thead>
						<tr>
							<th data-field="id" data-visible="false"></th>
							<th data-field="student" 		data-align="center">姓名</th>
							<th data-field="birthday"		data-align="center">生日</th>
							<th data-field="moonage" 		data-align="center">月龄</th>
							<th data-field="totals" 		data-align="center">总月数</th>
							<th data-field="useing" 		data-align="center">已用月数</th>
							<th data-field="rested" 		data-align="center">剩余月数</th>
							<th data-field="status" 		data-align="center" data-width="120" data-formatter="renderStatus">当天到课情况</th>
						</tr>
					</thead>
				</table>
			</div>
		</div>
		
		<!-- TODO 基本信息 -->
		<div class="widget radius-bordered mgbt-xs-10">
			<div class="widget-header">
				<i class="widget-icon icon-notebook"></i> 
				<span class="widget-caption"> 基本信息 </span>
			</div>
			<div class="widget-body editor-body-sm editor-body-classes">
				<!-- dynamic data -->
			</div>
		</div>
		
		<!-- TODO 老师信息 -->
		<div class="widget radius-bordered mgbt-xs-10">
			<div class="widget-header">
				<i class="widget-icon icon-notebook"></i> 
				<span class="widget-caption"> 本班老师 </span>
				<div class="widget-buttons buttons-bordered">
					<button class="btn btn-default btn-sm" data-toggle="modal" data-target="#teacher-table-modal" data-title="选择负责老师">
						<i class="fa fa-plus"></i>
					</button>
				</div>
			</div>
			<div class="widget-body editor-body-sm editor-body-teacher">
				<form class="table-editor" id="tables-form-teacher" data-validate="false">
					<table data-ajax="handlerSearch" 
								 data-method="post" 
								 data-id-field="id" 
								 data-unique-id="teacherid" 
								 data-pagination="true" 
								 data-click-to-select="true" 
								 data-side-pagination="server" 
								 data-mobile-responsive="true" 
								 data-form-source="#tables-form-teacher" 
								 data-form-target="#editor-form-teacher" 
								 data-form-search="#search-form-teacher" id="table-teacher" class="bootstrap-table">
						<thead>
							<tr>
								<th data-checkbox="true"></th>
								<th data-field="id" data-visible="false"></th>
								<th data-field="name" 		data-align="center">姓名</th>
								<th data-field="sex" 			data-align="center">性别</th>
								<th data-field="mobile" 	data-align="center">手机</th>
								<th data-field="method" 	data-align="center">收费方式</th>
								<th data-field="amount" 	data-align="center">费用</th>
								<th data-field="operator" data-align="center" data-width="100" data-formatter="renderOperator" data-table-target="teacher">操作</th>
							</tr>
						</thead>
					</table>
				</form>
			</div>
		</div>
		
	</div>
</div>

<!-- 提交 表单 ========================================================= -->
<form id="editor-form-classes" action="/miwawa/{dbname}/classes/update" method="post" 
			name="com.app.miwawa.api.eam.entity.Classes" data-custom-action="true">
			<input type="hidden" name="status" value="0">
			<input type="hidden" name="invalid" value="F">
</form>
<form id="editor-form-teacher" action="/miwawa/{dbname}/common/update" method="post" 
			name="com.app.miwawa.api.eam.entity.ClassesCharge">
			<input type="hidden" name="bean['teacherid']" id="teacherid">
			<input type="hidden" name="bean['classesid']" id="classesid">
			<input type="hidden" name="bean['status']" 		value="0">
			<input type="hidden" name="bean['invalid']" 	value="F">
</form>
<form id="editor-form-check" action="/miwawa/{dbname}/common/save" method="post" 
			name="com.app.miwawa.api.eam.entity.StudentCheck">
			<input type="hidden" name="bean['status']" value="0">
			<input type="hidden" name="bean['invalid']" value="F">
</form>

<!-- 查询 表单 ========================================================= -->
<form id="search-form-classestime" action="/miwawa/{dbname}/common/search.json" method="post" 
			name="com.app.miwawa.api.eam.entity.ClassesTime">
			<input type="hidden" name="status" value="0" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" name="invalid" value="F" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" name="classesId" value="0" data-search-group="and" data-search-operation="EQ">
</form>
<form id="search-form-teacher" action="/miwawa/{dbname}/common/search.json" method="post" 
			name="com.app.miwawa.api.eam.entity.view.ClassesTeacher">
			<input type="hidden" name="classesid" value="0" data-search-group="and" data-search-operation="EQ">
</form>
<form id="search-form-student" action="/miwawa/{dbname}/common/search.json" method="post" 
			name="com.app.miwawa.api.eam.entity.view.StudentLesson">
			<input type="hidden" name="item" value="托班" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" name="classesId" value="0" data-search-group="and" data-search-operation="EQ">
			<input type="hidden" data-search-sort="fromDate" data-search-order="desc">
</form>

<script type="text/javascript">
<!--
	require(['domReady'],function(domReady){
		domReady(function () {
			loadClasses();
		});
	});
	
	// 加载班级信息
	var classes, $moment;
	function loadClasses(){
		jQuery.utils.nowtimer();
		
		classes = jQuery("#table-classes").data("selectedRow");
		jQuery(":hidden[name='classesId']").val(classes.id);
		jQuery(":hidden[name='classesid']").val(classes.id);
		
		// 加载表单模版
		jQuery(".form-viewer-classes").loadform("data", classes);
		jQuery(".editor-body-classes").loadform("load", {
			templateId: "#edit-classes-template-dc",
			templatePath: "/miwawa/content/eam/classes/template.html",
			templateData: classes,
			templateHelper:{
				"select":function(value, target){
					require(['jquery.plugin.form'],function(form){
						form.chosen(target).select(target,{
							querys:{"invalid_EQ":"F"} 
						},function(chosen){
							jQuery("option:contains('"+value+"')", chosen).attr("selected","selected").trigger('chosen:updated');
						});
					});
				},
				"times":function(){
					jQuery("#search-form-classestime").searched({offset:0,limit:0}, {
						success: function(data, status, xhr){
							for(var i in data.rows){
								jQuery(".select-type[value='"+data.rows[i].type+"']").attr("checked","checked");
								jQuery("option[value='"+data.rows[i].week+"']", "#"+data.rows[i].mode+"Week").attr("selected","selected");
								jQuery("#"+data.rows[i].mode+"Time").val(data.rows[i].time.substring(0,5));
								jQuery("#"+data.rows[i].mode+"id").val(data.rows[i].id);
							}
						}
					});
				}
			},
			onLoadSuccess: function(){
				require(['moment','jquery.plugin.form'],function(moment, form){
					$moment = moment;
					form.datepicker(".date-selector");
					form.datepicker(".time-selector",{format:"HH:mm"});
					form.chosen("#fromWeek").chosen("#overWeek");
				});
			}
		});
		
		// 加载老师列表
		jQuery("#table-teacher").bootstrapTable();
		
		// 加载学员列表
		jQuery("#table-student").bootstrapTable();
	}
	
	function setFormData(dest, orig){
		jQuery("#teacherid", orig).val(teacher.teacherid);
		jQuery("#classesid", orig).val(teacher.classesid);
		return true;
	}
	
	// 更新负责老师收费项
	var teacher;
	function handlerUpdate(trigger, index){
		var _opts = jQuery(trigger).data();
				teacher = _opts.rowdata;
		
		jQuery("#table-teacher").bootstrapTable("updateRow",{
			index: index,
			row: createEditRow(_opts.rowdata, _opts.tableSource)
		});
		
		function createEditRow(row, target){
			jQuery(target).append("<input type='hidden' name='id' value='"+row.chargeid+"'>");
			
			return {
				id:   		"edit",
	      name: 		row.name,
	      sex: 			row.sex,
	      mobile: 	row.mobile,
	      method: 	createInput('method',	'select', 'ext-text', row.method),
	      amount: 	createInput('amount',	'number', 'ext-text', row.amount),
	      operator: createButton(target)
			};
		}
		
		// 创建输入框
		function createInput(name, type, ext, value){
			switch(type){
				case 'number': 
					return '<input name="'+name+'" id="'+name+'" type="'+type+'" class="form-control '+ext+'" value="'+(value ? value : '10.00')+'">';
				case 'select': 
					return '<select name="'+name+'" id="'+name+'" class="form-control">'
								+	'<option '+(value == '按课时' ? 'selected="selected"' : '')+' value="按课时">按课时</option>'
								+ '<option '+(value == '按人头' ? 'selected="selected"' : '')+' value="按人头">按人头</option>'
								+'</select>';
			}
		}
		
		// 创建按钮
		function createButton(target){
			return ""
						+"<span class='table-editor-tools'>"
						+"	<button type='button' class='btn btn-danger  btn-xs' onclick='handlerCancelRow(\""+target+"\", true);' data-toggle='tooltip' data-placement='top' title='取消'><i class='icon ion-close-circled'></i></button>"
						+"	<button type='button' class='btn btn-success btn-xs' onclick='handlerSubmitRow(\""+target+"\",\"setFormData\");' data-toggle='tooltip' data-placement='top' title='确认'><i class='icon ion-checkmark-circled'></i></button>"
						+"</span>";
		}
		
		jQuery("[data-toggle='tooltip']").tooltip({html:true, container:"html", trigger:'hover'});
	}
	
	// 删除负责老师
	function handlerDelete(trigger, index){
		var _opts = jQuery(trigger).data(), rowdata = _opts.rowdata;
		jQuery.ajaxsend({
			url:"/miwawa/{dbname}/classes/relation/delete".replace("{dbname}",dbname),
			data:{
				"chargeid":rowdata.chargeid,
				"teacherid":rowdata.teacherid
			},
			success:function(data){
				if(data && data["success"]) {
					jQuery("#table-teacher").bootstrapTable("refresh");
				}
			}
		});
	}
	
	// 切换签到历史的日期
	function handlerSwitch(week){
		var curdate = $moment();
		var fromdate = jQuery('#classes-time').data("from.date");
		var overdate = jQuery('#classes-time').data("over.date");
		switch(week){
			case -1:
				createHistory($moment(fromdate).add(week, 'w'));
			return;
			case 0:
				createHistory(curdate);
			return;
			case 1:
				createHistory($moment(overdate).add(week, 'w'));
			return;
		}
	}
	
	// 查询签到历史数据并创建列表
	function createHistory(nowdate){
		var from = $moment(nowdate).startOf('isoWeek');
		var over = $moment(nowdate).endOf('isoWeek');
		jQuery("#classes-time").text(from.format('YYYY年MM月DD日')+" - "+over.format('YYYY年MM月DD日'));
		jQuery("#classes-time").data("from.date",from.format('YYYY-MM-DD'));
		jQuery("#classes-time").data("over.date",over.format('YYYY-MM-DD'));
		var columns = getColumns($moment(from), $moment(over));
		
		jQuery.ajaxsend({
			url:"/miwawa/{dbname}/classes/check/history".replace("{dbname}",dbname),
			data:{
				"item":"托班",
				"checkDate":from.format('YYYY-MM-DD'),
				"classesId":classes.id
			},
			success:function(data){
				if(data){
					jQuery("#table-history").bootstrapTable("refreshOptions",{ columns:columns, data:data });
				}
			}
		});
	}
	
	// 返回签到历史表头
	function getColumns(from, over){
		var colums = [{checkbox:true},{field: 'student', title: '会员', align: 'center'}];
		var fromWeek = jQuery.utils.week[jQuery("#fromWeek").val()];
		var overWeek = jQuery.utils.week[jQuery("#overWeek").val()];
		
		for(;from <= over;from.add(1, 'd')){
			var week = from.day();
			var weeks = jQuery.utils.weeks[week];
			var title = from.format('YYYY-MM-DD');
			if(fromWeek <= week && week <= overWeek){
				colums.push({
					field: title, 
					title: createTitle(title, weeks)+createButton(title), 
					align: 'center', 
					formatter: 'renderWeek'
				});
			}
		}
		
		return colums;
	}
//-->
</script>